<script lang="ts" setup>
import type { SourceTrackVO } from '#/api/register/track/model';

import { onMounted, ref } from 'vue';

import { Select, Spin } from 'ant-design-vue';

import { sourceTrackList } from '#/api/register/track';

interface Props {
  number?: number;
}

const props = withDefaults(defineProps<Props>(), {
  number: undefined,
});

const emit = defineEmits(['blur', 'change', 'select']);
const loading = ref(false);
const list = ref<SourceTrackVO[]>([]);
const modelValue = defineModel<number | string>('value', {
  default: () => undefined,
});

onMounted(async () => {
  loading.value = true;
  // 查询状态为可用的数据
  const query: any = {
    status: '0',
  };
  if (props.number) {
    query.number = props.number;
  }
  const results = await sourceTrackList(query);
  list.value = results || [];
  loading.value = false;
});

function handleChange(val: any) {
  console.log(val);
  emit('change', modelValue.value);
}
</script>
<template>
  <Select
    v-model:value="modelValue"
    class="w-full"
    placeholder="请选择"
    show-search
    :options="list"
    option-filter-prop="sourceName"
    :field-names="{ label: 'sourceName', value: 'id' }"
    @blur="emit('blur')"
    @change="handleChange"
  >
    <template v-if="loading" #notFoundContent>
      <Spin size="small" />
    </template>
  </Select>
</template>
